<div class="box box-default">
  <div class="box-body">
    <form class="form-inline">
      <div class="box box-default">
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px !important;">
          <button class="btn btn-primary" type="button" (click)="showEditOrAddUser(1)">
              <i class="fa fa-edit"></i>添加</button>
          <button type="button" class="btn btn-box-tool pull-right" data-widget="collapse">
              <i class="fa fa-minus"></i></button>
        </div>
        <div class="box-body" style="display:block;">
          <div class="form-group" style="margin-top:10px !important;padding-left:5px !important;">
            <label class=" control-label">账号：</label>
            <input type="text" class="form-control" id="" name="sUsername" [(ngModel)]="getUserPost.sUsername" placeholder="请输入账号搜索">
            <label class=" control-label">姓名：</label>
            <input type="text" class="form-control" id="" name="sRealname" [(ngModel)]="getUserPost.sRealname" placeholder="请输入姓名搜索">
            <button type="button" class="btn btn-primary" (click)="getUserList()">
          <i class="fa fa-search"></i>查询</button>
          </div>
        </div>
      </div>
    </form>
    <div style="overflow-x:scroll;width:100%">
      <table id="list_table" class="table table-bordered table-keep-line table-hover table-striped" style="margin-top:10px;">
        <thead>
          <tr>
            <th class="width-20" (click)="orderData('sUsername')">账号<i class="fa fa-sort"></i></th>
            <th class="width-20" (click)="orderData('sRealname')">姓名<i class="fa fa-sort"></i></th>
            <th class="width-20" (click)="orderData('pmsRoleStr')">角色<i class="fa fa-sort"></i></th>
            <th class="width-20" (click)="orderData('sEmail')">邮箱<i class="fa fa-sort"></i></th>
            <th class="width-20">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of userList;">
            <td class="short_name" [attr.title]="item.sUsername">{{item.sUsername}}</td>
            <td class="short_name" [attr.title]="item.sRealname">{{item.sRealname}}</td>
            <td class="short_name" [attr.title]="item.pmsRoleStr">{{item.pmsRoleStr}}</td>
            <td class="short_name" [attr.title]="item.sEmail">{{item.sEmail}}</td>
            <td>
              <a class="btn-xs btn-primary" (click)="showEditOrAddUser(2,item)">
                <i class="fa fa-edit" title="编辑"></i>编辑</a>
              <a class="btn-xs btn-primary" (click)="delUser(item.sUsername)">
                <i class="iconfont icon-iconzhenghe62" title="删除"></i>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="box-footer clearfix">
      <app-pagination [currentPageNum]="userListPageInfo.currentPageNum" [pagesShow]="" [totalPages]="userListPageInfo.totalPages"
        (pageChanged)="userPageNavigation($event)">
        <div class="pull-left pagination-detail" data-pagination-additional="true">
          <span class="pagination-info">
            当前显示第{{userListPageInfo.startRow}}到第{{userListPageInfo.endRow}}条，总共{{userListPageInfo.total}}条，
          </span>
          <span class="page-list">
              每页记录
            <span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{userListPageInfo.pageSize}}</span>
          <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li *ngFor="let i of userListPageInfo.pageList" role="menuitem" [class.active]="userListPageInfo.pageSize === i" (click)="userpageSizeChange(i)">
              <a>{{i}}</a>
            </li>
          </ul>
          </span>
          条
          </span>
        </div>
      </app-pagination>
    </div>
  </div>
</div>

<!-- 修改用户modal -->
<div class="modal" id="edit-user">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" *ngIf="ifEdit == 2">修改用户</h4>
        <h4 class="modal-title" *ngIf="ifEdit == 1">新增用户</h4>
      </div>
      <form class="form-horizontal" #userForm="ngForm">
        <div class="modal-body">
          <div class="form-group">
            <label class="col-lg-2 text-right"><span class="span-style">*</span>账号:</label>
            <div class="col-lg-3">
              <input class="form-control form-fields" type="text" [(ngModel)]="editOrAddUserPost.sUsername" name="sUsername" [disabled]="ifEdit == 2"
                required>
            </div>
            <label class="col-lg-2 text-right"><span class="span-style">*</span>姓名:</label>
            <div class="col-lg-3">
              <input class="form-control form-fields" type="text" [(ngModel)]="editOrAddUserPost.sRealname" name="sRealname" required>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 text-right">同步方式:</label>
            <div class="col-lg-3">
              <select class="form-control" [(ngModel)]="editOrAddUserPost.sManual" name="sManual">
                <option [value]="0">自动同步</option>
                <option [value]="1">手工维护</option>
              </select>
            </div>
            <label class="col-lg-2 text-right">登录模式:</label>
            <div class="col-lg-3">
              <select class="form-control" [(ngModel)]="editOrAddUserPost.sLocallogin" name="sLocallogin">
                <option [value]="1">本地登录</option>
                <option [value]="0">单点登录</option>
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" *ngIf="ifEdit == 2" (click)="editUser()">保存</button>
          <button type="button" class="btn btn-primary" *ngIf="ifEdit == 1" (click)="addUser()">保存</button>
        </div>
      </form>
    </div>
  </div>
</div>